<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row>
                <el-col class="addClass">
                    <el-button type="primary" @click="addClassButton">添加分类</el-button>
                </el-col>
                <zk-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
                    <template slot="isok" slot-scope="scope">
                        <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i>
                        <i class="el-icon-error" v-else style="color:red"></i>
                    </template>
                    <template slot="order" slot-scope="scope">
                        <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
                        <el-tag type="warning" v-if="scope.row.cat_level==1">二级</el-tag>
                        <el-tag type="danger" v-if="scope.row.cat_level==2">三级</el-tag>
                    </template>
                    <template slot="opt" slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete">删除</el-button>
                    </template>
                </zk-table>
            </el-row>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </el-card>

        <el-dialog title="添加分类" :visible.sync="dialogFormVisible" width="50%" @close="addClassClosed">
  
  <el-form :model="addClassForm" ref="addClassFormRef" label-width="100px" :rules="addClassFormRule">
    <el-form-item label="分类名称" prop="cat_name">
      <el-input v-model="addClassForm.cat_name"></el-input>
    </el-form-item>
    <el-form-item label="父级分类" >
        <!-- 没救了，如果想任意选中，必须加change-on-select，但加了就会有小圈圈 -->
        <el-cascader v-model="choosed"
    :options="parentCateList"
    :props="classProps"
    @change="handleChange" clearable expand-trigger="hover" change-on-select></el-cascader>
    </el-form-item>
  </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addClassConfirm">确 定</el-button>
  </div>
</el-dialog>
    </div>
    
</template>

<script>
export default {
    data(){
        return {
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:9
            },
            catelist:[],
            total:0,
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name'
                },
                {
                    label:'是否有效',
                    type:'template',
                    template:'isok'
                },
                {
                    label:'排序',
                    type:'template',
                    template:'order'
                },
                {
                    label:'操作起来',
                    type:"template",
                    template:'opt'
                }
            ],
            dialogFormVisible:false,
            addClassForm:{
                cat_pid:0,
                cat_name:'',
                cat_level:0
            },
            addClassFormRule:{
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ]
            },
            parentCateList:[],
            choosed:[],
            classProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children',
            },

        }
    },
    created(){
        this.getcateList()
        this.queryInfo.pagesize=10
    },
    methods:{
        async getcateList(){
            const {data:res} = await this.$http.get('categories',{
                params:this.queryInfo
            })
            if(res.meta.status!==200) return this.$message.error('获取商品分类失败')
            this.catelist=res.data.result
            this.total=res.data.total
        },
        handleSizeChange(newVal){
            this.queryInfo.pagesize=newVal
            this.getcateList()
        },
        handleCurrentChange(newVal){
            this.queryInfo.pagenum=newVal
            this.getcateList()
        },
        addClassButton(){
            this.getParentCateList()
            this.dialogFormVisible=true
        },
        async getParentCateList(){
            const {data:res} = await this.$http.get('categories',{
                params:{type:2}
            })
            console.log(res)
            if(res.meta.status!=200) return this.$message.error(res.meta.msg)
            this.parentCateList=res.data
        },
        handleChange(){
            var lens=this.choosed.length
            if(lens>0){
                this.addClassForm.cat_pid=this.choosed[lens-1]
                this.addClassForm.cat_level=lens
            }else{
                this.addClassForm.cat_pid=0
                this.addClassForm.cat_level=0
            }
            console.log(this.addClassForm.cat_pid)
            console.log(this.addClassForm.cat_level)
        },
        addClassClosed(){
            this.$refs.addClassFormRef.resetFields()
            this.choosed=[]
            this.addClassForm.cat_pid=0
            this.addClassForm.cat_level=0
        },
        addClassConfirm(){
            this.$refs.addClassFormRef.validate(async val=>{
                if(!val) return
                const {data:res}= await this.$http.post('categories',this.addClassForm)
                if(res.meta.status!=201) return this.$message.error(res.meta.msg)
                this.$message.success("添加成功")
            })
            this.dialogFormVisible = false
        }
        
        
    }
}
</script>
<style lang="less" scoped>
    .el-cascader{
        width: 100%;
    }
    .addClass{
        margin-bottom: 7px;
    }
</style>